<template>
    <IDrawer v-model="defaultValue" :loading="loading" :width="400">
        <Form :model="data" :rules="ruleValidate" ref="formCreate" label-position="top">
            <FormItem label="姓名" prop="name">
                <Input v-model="data.name"></Input>
            </FormItem>
            <FormItem label="手机号码" prop="phone">
                <Input v-model="data.phone"></Input>
            </FormItem>
            <FormItem label="登录邮箱" prop="email">
                <Input v-model="data.email"></Input>
            </FormItem>
            <FormItem label="备注" prop="remark">
                <Input v-model="data.remark" type="textarea" :rows="4"></Input>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button type="primary" icon="ios-add" @click="submit('formCreate')">提交</Button>
            <Button type="warning" icon="md-log-out" @click="defaultValue = false">返回</Button>
        </div>
    </IDrawer>
</template>

<script>
    import IDrawerMixins from "../../../../mixins/iDrawerMixins";
    import IDrawer from "../../../../components/layout/IDrawer";

    export default {
        name: "addUser",
        components: {IDrawer},
        mixins: [IDrawerMixins],
        data() {
            return {
                data: {},
                ruleValidate: {
                    name: [
                        {required: true, message: '用户姓名必须填写', trigger: 'blur'},
                        {type: 'string', min: 2, max: 20, message: '用户姓名字符长度是2-20个字符', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '用户邮箱不能为空', trigger: 'blur'},
                        {type: 'email', message: '用户邮箱格式不正确', trigger: 'blur'},
                    ],
                    phone: [
                        {required: true, message: '手机号码必须填写', trigger: 'blur'},
                        {pattern: /^1[34578]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            submit(name) {
                this.validate(name).then(() => {
                    this.loading = true;
                    this.$http.post(`customer/index/${this.props.id}/user`,
                        Object.assign({}, this.data)
                    ).then(() => {
                        this.defaultValue = false;
                    }).finally(() => {
                        this.loading = false;
                    });
                }).catch(() => {
                });
            }
        }
    }
</script>

<style scoped>

</style>
